<template>
  <!-- 网站信息 -->
  <div class="webconfig">
    <!-- 导航 -->
    <tz-breadcrumb :title='["系统配置", "网站信息"]'
                   :pathArr='[{"name": "系统配置"},{"name": "网站信息", "url": "/webconfig"}]'></tz-breadcrumb>
    <!-- 数据表单 -->
    <div style="margin: 20px;"></div>
    <el-card class="box-card">
      <!-- <div slot="header" class="clearfix">
    <span>ISV服务商-各支付渠道配置</span>
    <el-button style="float: right; padding: 3px 0" type="text"></el-button>
  </div> -->
      <div class="text item">
        <el-tabs value="webbaseconfig">
          <!--<el-tabs value="webbaseconfig" @tab-click="handleClick">-->
          <el-tab-pane label="网站基础信息"
                       name="webbaseconfig">
            <!-- 阿里云 -->
            <el-form class=""
                     label-width="200px">
              <!--<el-form :label-position="labelPosition" class="" label-width="200px">-->
              <el-form-item label="网站名称">
                <el-input class="form-input"
                          v-model="initdatas.web_name"></el-input>
              </el-form-item>
              <el-form-item label="网站域名">
                <el-input class="form-input"
                          v-model="initdatas.web_uri"></el-input>
              </el-form-item>
              <el-form-item label="网站图标">
                <el-input class="form-input"
                          v-model="initdatas.web_logo"></el-input>
              </el-form-item>
              <el-form-item label="网站关键字">
                <el-input class="form-input"
                          v-model="initdatas.web_keyword"></el-input>
              </el-form-item>
              <el-form-item label="网站描述">
                <el-input class="form-input"
                          v-model="initdatas.web_details"></el-input>
              </el-form-item>
              <el-form-item label="网站二维码">
                <el-input class="form-input"
                          v-model="initdatas.web_qr_code"></el-input>
              </el-form-item>
              <el-form-item label="公众号二维码">
                <el-input class="form-input"
                          v-model="initdatas.official_qr_code"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary"
                           @click="setDate()">保存修改</el-button>
                <!--<el-button type="primary" @click="onSubmit">保存修改</el-button>-->
              </el-form-item>
            </el-form>
          </el-tab-pane>

          <el-tab-pane label="联系方式"
                       name="webliaison">
            <!-- 联系方式 -->
            <el-form class=""
                     label-width="200px">
              <el-form-item label="网站联系方式：">
                <el-input class="form-input"
                          v-model="initdatas.web_contact_way"></el-input>
              </el-form-item>
              <el-form-item label="网站QQ号：">
                <el-input class="form-input"
                          v-model="initdatas.web_qq_number"></el-input>
              </el-form-item>
              <el-form-item label="联系地址：">
                <el-input class="form-input"
                          v-model="initdatas.web_address"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary"
                           @click="setDate()">保存</el-button>
                <!--<el-button type="primary" @click="onSubmit">保存</el-button>-->
              </el-form-item>
            </el-form>
          </el-tab-pane>

          <el-tab-pane label="网站版权"
                       name="webcopyright">
            <!-- 联系方式 -->
            <el-form class=""
                     label-width="200px">
              <el-form-item label="网站ICP备案号：">
                <el-input class="form-input"
                          v-model="initdatas.web_icp"></el-input>
              </el-form-item>
              <el-form-item>
                <!--<el-button type="primary" @click="onSubmit">保存</el-button>-->
                <el-button type="primary"
                           @click="setDate()">保存</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="App下载"
                       name="appdown">
            <!-- 安卓app下载二维码 -->
            <el-form class=""
                     label-width="200px">
              <el-form-item label="安卓app下载二维码">
                <img :src="showImg + initdatas.androle_qr"
                     v-if="initdatas.androle_qr"
                     width="100px"
                     height="100px">
                <input type="file"
                       name=""
                       class="form-input"
                       @change="setImg($event,'androle_qr')">
              </el-form-item>
              <el-form-item label="苹果App下载二维码">
                <img :src="showImg + initdatas.ios_qr"
                     v-if="initdatas.ios_qr"
                     width="100px"
                     height="100px">
                <input type="file"
                       name=""
                       class="form-input"
                       @change="setImg($event,'ios_qr')">
              </el-form-item>
              <el-form-item>
                <el-button type="primary"
                           @click="setDate()">保存</el-button>
                <!--<el-button type="primary" @click="onSubmit">保存</el-button>-->
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="登陆页Banner图"
                       name="login_banner">
            <!-- 安卓app下载二维码 -->
            <el-form class=""
                     label-width="200px">
              <el-form-item label="图一">
                <img :src="showImg + initdatas.banner1"
                     v-if="initdatas.banner1"
                     width="100px"
                     height="100px">
                <input type="file"
                       name=""
                       class="form-input"
                       @change="setImg($event,'banner1')">
                <el-input class="form-input"
                          placeholder="跳转地址"
                          v-model="initdatas.banner1_url"></el-input>
              </el-form-item>
              <el-form-item label="图二">
                <img :src="showImg + initdatas.banner2"
                     v-if="initdatas.banner2"
                     width="100px"
                     height="100px">
                <input type="file"
                       name=""
                       class="form-input"
                       @change="setImg($event,'banner2')">
                <el-input class="form-input"
                          placeholder="跳转地址"
                          v-model="initdatas.banner2_url"></el-input>
              </el-form-item>
              <el-form-item>
                <!--<el-button type="primary" @click="onSubmit">保存</el-button>-->
                <el-button type="primary"
                           @click="setDate()">保存</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>

  </div>
</template>

<script>
import tzBreadcrumb from './../../components/breadcrumb/breadcrumb.vue';
import http from './../../config/index';
import api from './../../api/api';
export default {
  mounted: function () {
    this.getData();
    // this.initdata();
  },
  components: {
    'tz-breadcrumb': tzBreadcrumb
  },
  data: () => {
    return {
      initdatas: {
        web_name: '',
        web_uri: '',
        web_logo: '',
        web_keyword: '',
        web_details: '',
        web_qr_code: '',
        official_qr_code: '',
        web_contact_way: '',
        web_qq_number: '',
        web_address: '',
        web_icp: '',
        androle_qr: '',
        ios_qr: '',
        banner1: '',
        banner2: '',
        banner1_url: '',
        banner2_url: ''
      },
      config: {

      },
      upConfig: [],
      inittables: {},
      showImg: api.baseUrl + api.showImg + '?code='
    };
  },
  methods: {
    getData () {
      let that = this;
      that.loading = true;
      http.get(api.Getconfig, {
        token: localStorage.getItem('token')
      }, response => {
        response.data.forEach(function (v) {
          that.initdatas[v.set_key] = v.set_value;
          that.config[v.set_key] = v.set_value;
          // Object.freeze(that.config);
        });
      }, () => {
        that.$message.error('网络错误');
        that.loading = false;
      });
    },
    setDate () {
      let that = this;
      that.setConfig();
      if (that.upConfig.length > 0) {
        that.setBatchConfig();
        that.upConfig = [];
      }
    },
    setBatchConfig () {
      let that = this;
      console.log(that.config.web_name);
      console.log(that.initdatas.web_name);
      http.post(api.setbatchconfig, {
        token: localStorage.getItem('token'),
        config: that.upConfig
      }, response => {
        if (response.code === 10001 || response.code === '10001') {
          that.$message({
            type: 'success',
            message: '修改成功!',
            success: () => {
              that.config = that.initdatas;
            }
          });
        } else {
          this.$message({
            type: 'warning',
            message: response.msg
          });
        }
      }, () => {

      });
    },
    setConfig () {
      let that = this;
      for (let k in that.initdatas) {
        if (that.initdatas[k] !== that.config[k]) {
          let obj = {
            'set_key': k,
            'set_value': that.initdatas[k]
          };
          that.upConfig.push(obj);
        }
      }
      console.log(that.upConfig);
    },
    setImg (event, img) {
      let that = this;
      let file = event.target.files;
      http.upImg(api.upimg, {
        file: file[0]
      }, response => {
        that.initdatas[img] = response.data[0].file_code;
        // console.log(that.initdatas.androle_qr);
      }, err => {
        console.log(err);
      });
    }
  }
  // initdata: function () {
  //   // console.log('aa');
  //   // this.getData(api.getAlipayConf);
  //   // this.getData(api.getwechatpayconfig);
  // },

};
</script>

<style lang="stylus" scoped>
.form
  padding 2rem
  padding-right 200px
  margin-top 15px
  margin-bottom 12px
  box-sizing border-box
  background #fff
  box-shadow 1px 1px 1px #999
  .form-item
    display inline-block
    margin-right 35px
    label
      font-size 14px
      color #333
      width 200px
      display inline-block
    .form-input, .form-select
      width 200px
  .line
    height 15px
.server-item
  width 20px
  height 20px
  margin 5px
</style>
